<template>
	<view class="pages-loading page">
		<image class="logo-img" src="/static/img/logo.png" />
		<view class="step-wraps flex-center">
			<view class="schedule-kuang">
				<view class="schedule flex-r" :style="'width: calc(' + progressWidth + '% - 25px)'">
				</view>
				<view class="flex-center schedule-text">
					{{ progress }}%
				</view>
				<image src="/static/img/dot.png" class="liang-icon" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Loading',
	data() {
		return {
			progress: 0,
			progressWidth: 0
		}
	},
	mounted() {
		const token = uni.getStorageSync('x-token')
		if (token) {
			this.startLoading()
		} else {
			uni.navigateTo({
				url: '/pages/index/index'
			})
		}
	},
	methods: {
		startLoading() {
			const duration = 2000 // 2秒
			const interval = 50 // 每50ms更新一次
			const steps = duration / interval
			const increment = 99 / steps // 只到99%
			
			let currentStep = 0
			
			const timer = setInterval(() => {
				currentStep++
				this.progress = Math.min(Math.floor(currentStep * increment), 99)
				this.progressWidth = Math.min(currentStep * increment, 99)
				
				if (currentStep >= steps) {
					clearInterval(timer)
					// 加载完成后跳转到首页
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/home/home'
						})
					}, 500)
				}
			}, interval)
		}
	}
}
</script>

<style scoped lang='scss'>
.pages-loading {
	width: 100%;
	margin: 0 auto;
	height: 100vh;
	background: url(/static/img/loading-bg.png) no-repeat;
	background-size: 100% auto;
	padding-top: 46px;
	top: 0;
	box-sizing: border-box;
	text-align: center;
	position: fixed;
	z-index: 9999999;

	.logo-img {
		width: 202px;
		height: 97px;
		text-align: center;
		margin: 0 auto;
	}

	.step-wraps {
		width: 100%;
		position: absolute;
		bottom: 10%;
		left: 0;
		padding: 0 31px;
		box-sizing: border-box;

		.schedule-kuang {
			width: 322px;
			height: 41px;
			box-sizing: border-box;
			background: url(/static/img/load-bar.png) no-repeat;
			background-size: 100% 100%;
			position: relative;

			.schedule {
				position: absolute;
				left: 11px;
				top: 6px;
				width: 0%;
				height: 19px;
				padding-right: 3px;
				box-sizing: border-box;
				line-height: 19px;
				background: linear-gradient(0deg, #ff7901, #fff449);
				box-shadow: 0 0.5px 2px 0 #612200;
				border-radius: 11px;
				transition: width 0.1s ease;
			}

			.schedule-text {
				padding-top: 7px;
				font-size: 12px;
				color: #fff;
				position: relative;
				z-index: 10;
			}

			.liang-icon {
				position: absolute;
				width: 10px;
				height: 9px;
				left: 16px;
				top: 7px;
			}
		}
	}
}
</style>